<template>
	<slot :onOpenDialog="onOpenDialog" :showNames="selectedNames" name="yh">
		<el-input
			:modelValue="selectedNames.join()"
			class="width-item"
			type="text"
			:placeholder="placeholder"
			readonly
			@click.native="onOpenDialog"
		>
		</el-input>
	</slot>
	<div class="liebiao">
		<el-dialog
			v-model="visible"
			:title="title"
			@close="quxiao"
			top="4vh"
			:close-on-click-modal="false"
			destroy-on-close
		>
			<div class="classification">
				<div class="classification-left">
					<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
						<el-tab-pane label="按部门分类" name="department">
							<div class="classification-department">部门列表</div>
							<el-tree @node-click="tabList" :data="dataList" :props="defaultProps"></el-tree>
						</el-tab-pane>
						<el-tab-pane label="按群组分类" name="group">
							<div class="classification-department">群组列表</div>
							<el-tree @node-click="tabList" :data="dataList" :props="defaultProps"></el-tree>
						</el-tab-pane>
					</el-tabs>
				</div>
				<div class="classification-right">
					<div>
						<el-input :placeholder="placeholders" v-model="selectText">
							<template #append>
								<el-button :icon="Search" @click="onSearch">搜索</el-button>
							</template>
						</el-input>
					</div>
					<div class="details">
						<el-table
							type="card"
							highlight-current-row
							@current-change="handleSelectionChange"
							:data="tableData"
							border
							style="width: 100%"
						>
							<el-table-column prop="realName"></el-table-column>
						</el-table>
						<div style="display: flex; justify-content: center">
							<el-pagination
								layout="prev, pager, next"
								v-model:current-page="current"
								v-model:page-size="pageSize"
								:total="totalList"
								@current-change="asa"
							></el-pagination>
						</div>
					</div>
				</div>
			</div>

			<div class="tip">
				<div class="tip-item">
					用户选择：<el-tag
						style="margin-right: 10px"
						closable
						:disable-transitions="false"
						v-if="selectedNames.length > 0"
						@close="tagClose"
					>
						{{ selectedNames.join() }}
					</el-tag>
				</div>
				<div></div>
			</div>

			<template #footer>
				<el-button @click="quxiao">取消</el-button>
				<el-button type="primary" @click="onConfirm">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { Search, RefreshLeft } from "@element-plus/icons-vue"
import { getAxios } from "/axios"

const props = defineProps({
	modelValue: {
		type: Array,
		default: () => [],
	},
	placeholder: {
		type: String,
		default: "",
	},
	placeholders: {
		type: String,
		default: "",
	},
	title: {
		type: String,
		default: "",
	},
})
const emits = defineEmits(["update:modelValue", "depName", "close"])

const dataList = ref([])
const activeName = ref("department")
const selectText = ref("")
const type = ref("1") //判断部门还是群组
const authNameSrc = ref(false)
const totalList = ref(null)
let authName = ref("")
const zancun = ref([])
//总条目
const total = ref(null)
//当前页显示多少
const pageSize = ref(8)
// 当前页
const current = ref(1)

const tableData = ref([])

const visible = ref(false)
const selected = computed({
	get() {
		checked.value = [].concat(...props.modelValue)
		return props.modelValue
	},
	set(selected) {
		emits("update:modelValue", selected)
	},
})
const selectedIds = computed(() => selected.value.map(item => item.id))
const selectedNames = computed(() => selected.value.map(item => item.realName))
let checked = ref([])
function onOpenDialog() {
	zancun.value = selected.value
	visible.value = true
}
function isActive(item) {
	if (item) {
		return !!~checked.value.findIndex(check => check.realName == item.realName)
	} else {
		return false
	}
}
async function tabList(data) {
	current.value = 1
	const res = await getAxios(
		`/system/sysUser/page?loginName=&realName=&phone=&deptId=${data.id}&current=${current.value}&size=${pageSize.value}`
		// `/system/sysDept/list?parentId=${data.id}`
	)
	totalList.value = +res.total
	tableData.value = [].concat(res.records)
}
let deptldName = ref("")
async function list() {
	if (type.value == 1) {
		dataList.value = await getAxios("/system/sysDept/list")
	} else {
		dataList.value = await getAxios("/knowledge/kbGroups/list")
	}
}
list()
const defaultProps = reactive({
	children: "children",
	label: "name",
})
const handleClick = event => {
	if (event.props.label == "按部门分类") {
		type.value = 1
	} else {
		type.value = 2
	}
	list()
}
const handleSelectionChange = async val => {
	if (!val) return
	if (isActive(val)) {
		checked.value = checked.value.filter(check => check.id != val.id)
		selected.value.splice(0, 1)
	} else {
		checked.value = [val]
		selected.value = [val]
	}
	// if (val.realName) {
	// 	authName.value = val.realName
	// }
	// deptldName.value = val.deptName
	authNameSrc.value = true
	// selected.value = val.id
	// await nextTick()
	emits("depName", deptldName)
}
const tagClose = () => {
	authName.value = ""
	deptldName.value = ""
	authNameSrc.value = false
	selected.value = []
}
function onConfirm() {
	selected.value = [].concat(...checked.value)
	zancun.value = zancun.value = JSON.parse(JSON.stringify(selected.value))
	totalList.value = 0
	visible.value = false
}

const play = () => {
	authName.value = ""
}
defineExpose({
	play,
})
const onSearch = async () => {
	current.value = 1
	const res = await getAxios(`/system/sysUser/list?realName=${selectText.value}&current=1&size=${pageSize.value}`)
	totalList.value = +res.total
	tableData.value = [].concat(res.records)
}
async function asa() {
	const res = await getAxios(`/system/sysUser/list?size=${pageSize.value}&current=${current.value}`)
	totalList.value = +res.total
	tableData.value = res.records
}
const quxiao = () => {
	visible.value = false
	selectText.value = ""
	tableData.value = []
	selected.value = zancun.value
	totalList.value = 0
	// selected.value = []
	checked.value = []
	emits("close")
}
</script>

<style lang="scss" scoped>
@import "/style/basis";

.tip {
	border-top: 1px solid #2972fa;
	border-bottom: 1px solid #2972fa;
	height: 60px;
	margin-top: 60px;
	margin-bottom: 20px;
	padding: 13px;
	display: flex;
	justify-content: space-between;
}

.check {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.change {
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.classification {
	display: flex;
	margin-bottom: 20px;
	height: 450px;
}

.classification-left {
	width: 35%;
	margin-right: 20px;
	border: 1px solid #eee;
	border-radius: 5px;
	overflow: scroll;
	background-color: #f4faff;
}

.classification-left::-webkit-scrollbar {
	display: none;
}

.classification-right {
	width: 65%;

	:deep(.el-input__wrapper) {
		box-shadow: 0 0 0 1px #dcdfe6 inset;
	}
}

.classification-department {
	width: 100%;
	text-align: center;
}

.details {
	// padding: 20px 0;
	overflow: scroll;
	// height: 400px;
}

.details::-webkit-scrollbar {
	display: none;
}

::v-deep.el-tabs {
	height: 100%;
	background-color: #f4faff;
}

.el-tree-node__content {
	background-color: #fff;
}

.width-item {
	width: 250px;

	@include maxWidth(450) {
		width: 200px;
	}
}

.liebiao {
	:deep(.el-dialog) {
		width: 800px !important;
		overflow-y: scroll;
		// @include maxWidth(768) {
		// 	width: 100vw !important;
		// }
	}
}
</style>
